<!--
 * @Author: YWY
 * @Date: 2022-02-22 16:17:42
 * @LastEditors: YWY
 * @LastEditTime: 2022-03-06 20:04:18
-->
<template>
  <div class="home-container">
    <!-- 页面头部区域 -->
    <my-header :title="pageTitle"></my-header>
    <!-- 板块导航区域 -->
    <div class="home-nav-grid-contianer">
      <van-grid class="nav-grid" :column-num="3">
        <van-grid-item
          v-for="item in sectionList"
          :key="item.id"
          :icon="item.icon"
          :text="item.partition_name"
          :to="{ path: `/section/${item.id}/${item.partition_name}` }"
        />
      </van-grid>
    </div>

    <!-- 要闻展示区 -->
    <plate-zoom title="校园新闻" :id="1"></plate-zoom>
    <plate-zoom title="通知公告" :id="2"></plate-zoom>
  </div>
</template>

<script>
import PlateZoom from "@/components/PlateZoom.vue";
import { defineComponent } from "@vue/runtime-core";
import { mainStore } from "@/store/index.js";
import { storeToRefs } from "pinia";
import { getSectionArticleList } from "../api/services/user.service";

export default defineComponent({
  name: "Home",
  setup() {
    const main = mainStore();

    const { pageTitle, searchDis, sectionList } = storeToRefs(main);
    //从服务器获取分区列表
    main.loadSectionList();

    return {
      main,
      pageTitle,
      searchDis,
      sectionList,
    };
  },
  components: {
    PlateZoom,
  },
});
</script>

<style lang='less'>
.nav-grid {
  .van-grid-item__text {
    font-size: 16px;
  }
  .van-grid-item__icon {
    font-size: 40px;
  }
  // .van-grid-item__content {
  //   border-radius: 20px;
  //   background-color: white;
  //   margin: 5px 5px;
  // }
}
</style>